<template>
    <div class="role-box">
        <div class="user-box">
            <p>
                <el-link type="primary" @click="clickNoticeFun">
                    <strong style="display:flex;align-items:center">
                        <span>星球用户列表</span>&nbsp;<el-icon size="15"><QuestionFilled color="gray" /></el-icon>
                    </strong>
                </el-link>
            </p>
            <el-input v-model="userSearch" type="text" clearable placeholder="请输入用户信息，回车检索" @keyup.enter="getUserInfo()"/>
            <el-radio-group v-model="selectAccount">
                <el-radio v-for="(item,index) in userList" :key="index" :label="item.userId" border @change="getRolesByUserId(item.userId)" style="margin-top:10px;background-color: #d1edc4">
                    账户：{{item.loginAccount}} ==>用户名：{{item.userName}}
                </el-radio>
            </el-radio-group>
            <el-result
                v-if="userList.length == 0"
                icon="warning"
                title="温馨提示"
                sub-title="暂无人员列表，快注册吧"
            >
                <template #extra>
                    <el-button type="primary">回到首页</el-button>
                </template>
            </el-result>
        </div>
        <el-divider direction="vertical" style="width:5px; height: 600px"/>
        <div class="left">
            <p>
                <el-link type="primary" @click="clickNoticeFun">
                    <strong style="display:flex;align-items:center">
                        <span>星球角色列表</span>&nbsp;<el-icon size="15"><QuestionFilled color="gray" /></el-icon>
                    </strong>
                </el-link>
            </p>
            <el-result
                v-if="roleList.length == 0"
                icon="warning"
                title="温馨提示"
                sub-title="暂无角色信息，请维护角色 ~ ~ ~"
            >
                <template #extra>
                    <el-button type="primary">回到首页</el-button>
                </template>
            </el-result>              
            <el-checkbox-group v-model="selectRoleList">
                <el-checkbox v-for="(item,index) in roleList" :key="index" :label="item.roleId" border style="margin-top:10px" name="role" @change="selectRoleInfo(item.roleId)">
                    {{item.roleName}}
                </el-checkbox>
            </el-checkbox-group>
            <div class="btn">   
                <el-button type="success" @click="clickSetRoleOfuser">
                    点击分配
                    <el-icon size="16" class="el-icon--right"><Edit /></el-icon>
                </el-button>
                <el-button type="warning" @click="resetUserRole">
                    取消选择
                    <el-icon size="16" class="el-icon--right"><Delete /></el-icon>
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import MenuTree from '@/components/sonComponent/MenuTree.vue'
import { onMounted, ref } from 'vue'
import { $http } from '@/utils/axios'
import { gatewayPrefix, userMiddleContextPath} from '@/utils/commConstance'
import { ElMessage, ElNotification } from 'element-plus';
const selectRoleList = ref([])
const selectRoleMenu = ref([])
const selectAccount = ref('')
const userSearch = ref('')
const userList=ref([])
const roleList=ref([])
const userRoleList=ref([])
onMounted(()=>{
    getUserInfo()
    getRoleList()
})
// 获取账号信息
const getUserInfo = ()=>{
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/getSysUserInfo?content=${userSearch.value}`).then(res=>{
        userList.value=res
    })
}
// 根据userId获取角色
const getRolesByUserId = (userId)=>{
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/getRolesByUserId/${userId}`).then(res=>{
        if(res == null || res.length == 0){
            selectRoleList.value=[]
            return
            // return ElMessage.warning('当前用户暂无角色信息,请分配角色')
        }
        selectRoleList.value=[]
        res.forEach(role => {
            selectRoleList.value.push(role.roleId)
        });
    })
}
// 选择的角色
const selectRoleInfo = (roleId)=>{
    selectRoleMenu.value.push(roleId)
    let roleSet = Array.from(new Set(selectRoleMenu.value))
    selectRoleMenu.value=[]
    selectRoleMenu.value = roleSet
}
// 获取角色
const getRoleList = ()=>{
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/getRoleList?isAll=false`).then(res=>{
        roleList.value = res
    })
}
// 说明
const clickNoticeFun=()=>{
    ElNotification({
        title: '权限分配说明',
        dangerouslyUseHTMLString: true,
        message: '<p>1、选择账号信息，再选择要分配的角色信息，点击分配即可!!!</p> \
                <p style="margin-top:10px">2、选择角色信息后，再选择上对应菜单信息，点击添加菜单即可,注:每次只能选一个角色分配菜单!!!</p> \
                <p style="margin-top:10px">3、账号勾选上选择的角色信息后，之前存在的角色如果没选中，则默认删除该角色，即每次选择角色后，\
                    对于不存在账号不存在的角色会添加，对于存在的角色如果勾选了则不变，如果没勾选则删除!!!</p> \
                <p>4、每个账号在注册时会自动分配一种角色，所以每个账号至少应该有一种角色!!!</p> ',
        type: 'success',
    })
}
// 给账户分配角色
const clickSetRoleOfuser = ()=>{
    if(selectRoleList.value === null || selectRoleList.value === undefined || selectRoleList.value.length === 0){
        return ElMessage.warning('请至少给当前账号分配一种角色')
    }
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/setRoleForUser/${selectAccount.value}/${selectRoleList.value}`).then(res=>{
        if(res){
            ElMessage.success('分配成功')
        }else{
            ElMessage.error('分配失败')
        }
    })
}
//取消角色选择
const resetUserRole=()=>{
    selectRoleList.value = []
    getRolesByUserId(selectAccount.value)
    
}
</script>

<style lang="less" scoped>
.role-box{
    width: 100%;
    height: 90%;
    display: flex;
    .user-box{
        width: 50%;
        height: 100%;
    }
    .left{
        width: 40%;
        height: 100%;
        margin-left: 80px;
        .btn{
            margin-top: 20px;
        }
    }

}


</style>